<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录 - 百货购物平台</title>
  <link rel="stylesheet" href="layui-v2.9.20/layui/css/layui.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    /*全局样式重置*/
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    }

    body {
      background-color: #fafafa;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: linear-gradient(135deg, #fff0f3 0%, #ffecef 100%);
    }

    .login-container {
      width: 500px;
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 15px 40px rgba(255, 141, 161, 0.25);
      padding: 50px 40px;
      position: relative;
      overflow: hidden;
    }

    .login-header {
      text-align: center;
      margin-bottom: 40px;
    }

    .login-header h2 {
      color: #ff4d7a;
      font-size: 32px;
      font-weight: 800;
    }

    .login-header p {
      color: #888;
      margin-top: 15px;
      font-size: 16px;
    }

    .login-form .layui-form-item {
      margin-bottom: 25px;
    }

    .form-label {
      display: block;
      margin-bottom: 10px;
      color: #666;
      font-weight: 500;
      font-size: 16px;
    }

    .login-form .layui-input {
      height: 55px;
      line-height: 55px;
      padding-left: 55px;
      border-radius: 10px;
      border: 1px solid #eee;
      font-size: 16px;
      width: 100%;
    }

    .login-form .layui-input:focus {
      border-color: #ff8da1;
      box-shadow: 0 0 0 2px rgba(255, 141, 161, 0.2);
    }

    .login-form .input-icon {
      position: absolute;
      left: 20px;
      top: 18px;
      color: #999;
      font-size: 22px;
    }

    .login-btn {
      background: linear-gradient(135deg, #ff4d7a 0%, #ff8da1 100%);
      color: white;
      border: none;
      height: 55px;
      line-height: 55px;
      font-size: 20px;
      font-weight: 600;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.3s;
      width: 100%;
      box-shadow: 0 5px 15px rgba(255, 77, 122, 0.3);
    }

    .login-btn:hover {
      background: linear-gradient(135deg, #ff3366 0%, #ff7799 100%);
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(255, 77, 122, 0.4);
    }

    .login-btn.loading {
      background: linear-gradient(135deg, #ff8da1 0%, #ffc0cb 100%);
      cursor: not-allowed;
    }

    .login-footer {
      text-align: center;
      margin-top: 30px;
      color: #888;
      font-size: 16px;
    }

    .login-footer a {
      color: #ff4d7a;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s;
    }

    .login-footer a:hover {
      text-decoration: underline;
      color: #ff3366;
    }

    .logo {
      text-align: center;
      margin-bottom: 25px;
      color: #ff4d7a;
      font-size: 40px;
      font-weight: 800;
    }

    .logo i {
      margin-right: 12px;
      font-size: 42px;
    }

    .test-account {
      background: #fff9fb;
      border: 1px dashed #ffdde4;
      border-radius: 10px;
      padding: 18px;
      margin-bottom: 25px;
      text-align: center;
      color: #ff4d7a;
      font-size: 16px;
    }

    .input-container {
      position: relative;
    }

    .status-message {
      text-align: center;
      margin-top: 15px;
      font-size: 14px;
      min-height: 20px;
    }

    .success-message {
      color: #52c41a;
    }

    .error-message {
      color: #f5222d;
      animation: shake 0.5s;
    }

    @keyframes shake {
      0%, 100% {transform: translateX(0);}
      20%, 60% {transform: translateX(-5px);}
      40%, 80% {transform: translateX(5px);}
    }

    .api-status {
      display: flex;
      justify-content: center;
      margin-top: 15px;
    }

    .api-dot {
      width: 8px;
      height: 8px;
      background-color: #ddd;
      border-radius: 50%;
      margin: 0 4px;
      transition: all 0.3s;
    }

    .api-dot.active {
      background-color: #ff4d7a;
    }

    .loading-spinner {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255,255,255,.3);
      border-radius: 50%;
      border-top-color: #fff;
      animation: spin 1s ease-in-out infinite;
      margin-right: 10px;
      vertical-align: middle;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
<div class="login-container">
  <div class="logo">
    <i class="fas fa-shopping-bag"></i>
    <span>百货购物</span>
  </div>
  <div class="login-header">
    <h2>欢迎登录</h2>
    <p>百货购物平台，畅享购物乐趣</p>
  </div>

  <div class="test-account">
    <i class="fas fa-info-circle"></i> 测试账号：13900139000 / 123456
  </div>

  <form class="layui-form login-form" id="loginForm">
    <div class="layui-form-item">
      <label class="form-label">手机号</label>
      <div class="input-container">
        <i class="fas fa-mobile-alt input-icon"></i>
        <input type="text" id="phone" name="phone" required placeholder="请输入手机号" autocomplete="off" class="layui-input" value="13900139000">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="form-label">密码</label>
      <div class="input-container">
        <i class="fas fa-lock input-icon"></i>
        <input type="password" id="password" name="password" required placeholder="请输入密码" autocomplete="off" class="layui-input" value="123456">
      </div>
    </div>
    <div class="layui-form-item">
      <button type="button" class="login-btn" id="loginBtn">登 录</button>
    </div>
    <div class="status-message" id="statusMsg"></div>
    <div class="login-footer">
      没有账号？<a href="register.html">立即注册</a>
    </div>
  </form>
</div>

<script>
  $(document).ready(function() {
    // 初始化状态
    const loginBtn = $('#loginBtn');
    const statusMsg = $('#statusMsg');
    const phoneInput = $('#phone');
    const passwordInput = $('#password');

    // 更新状态消息
    function showStatusMessage(message, isSuccess) {
      statusMsg.text(message);
      statusMsg.removeClass('success-message error-message');
      if (isSuccess) {
        statusMsg.addClass('success-message');
      } else {
        statusMsg.addClass('error-message');
      }
    }

    // 手机号验证
    function validatePhone(phone) {
      const reg = /^1[3-9]\d{9}$/;
      return reg.test(phone);
    }

    // 获取后端基础URL - 解决跨域问题
    function getBackendBaseUrl() {
      // 根据当前环境确定后端URL
      if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
        return 'http://localhost:8080';
      }
      // 生产环境使用相同域名
      return window.location.origin;
    }

    // 登录按钮点击事件
    loginBtn.on('click', function() {
      const phone = phoneInput.val().trim();
      const password = passwordInput.val().trim();

      // 验证输入
      if (!phone) {
        showStatusMessage('请输入手机号', false);
        return;
      }

      if (!validatePhone(phone)) {
        showStatusMessage('请输入有效的手机号码', false);
        return;
      }

      if (!password) {
        showStatusMessage('请输入密码', false);
        return;
      }

      // 显示加载状态
      loginBtn.html('<span class="loading-spinner"></span> 登录中...');
      loginBtn.addClass('loading');
      loginBtn.prop('disabled', true);

      // 显示API状态
      showStatusMessage('正在连接服务器...', true);

      // 使用jQuery AJAX发送请求
      $.ajax({
        url:  getBackendBaseUrl()+"/user/login",
        method: 'POST',
        contentType: 'application/json',
        xhrFields: { withCredentials: true },
        data: JSON.stringify({
          phone: phone,
          password: password
        }),
        success: function(data) {
          console.log('登录响应数据:', data);

          if (data.code === 200) {
            // 登录成功
            showStatusMessage('登录成功！正在跳转...', true);
            console.log(data.data);
            //保存用户信息到localStorage
            localStorage.setItem('user', JSON.stringify({
              userId: data.data.userId,
              userName: data.data.userName
            }));
            sessionStorage.setItem(
                    'user', JSON.stringify({
                      userId: data.data.userId,
                      userName: data.data.userName,
                      //userPhone: data.data.userPhone
                    }));

            // 跳转到首页
            setTimeout(() => {
              window.location.href = "index.html";
            }, 100);
          } else {
            // 登录失败
            showStatusMessage('登录失败: ' + (data.message || '未知错误'), false);

            // 重置按钮状态
            loginBtn.html('登 录');
            loginBtn.removeClass('loading');
            loginBtn.prop('disabled', false);
          }
        },
        error: function(xhr, status, error) {
          let errorMessage = error || '网络错误';

          if (xhr.responseJSON && xhr.responseJSON.message) {
            errorMessage = xhr.responseJSON.message;
          } else if (xhr.status === 404) {
            errorMessage = '请求的API不存在，请联系管理员';
          } else if (xhr.status === 500) {
            errorMessage = '服务器内部错误，请稍后再试';
          }

          showStatusMessage('登录失败: ' + errorMessage, false);

          // 重置按钮状态
          loginBtn.html('登 录');
          loginBtn.removeClass('loading');
          loginBtn.prop('disabled', false);
        }
      });
    });

    // 输入框回车触发登录
    phoneInput.on('keypress', function(e) {
      if (e.key === 'Enter') loginBtn.click();
    });

    passwordInput.on('keypress', function(e) {
      if (e.key === 'Enter') loginBtn.click();
    });
  });
</script>
</body>
</html>